<template>
	<nt-container v-model="scrollHeight">

		<view class="" style="background: #fff;padding: 20rpx 20rpx;margin: 20rpx 0;font-size: 14rpx;">
			<view class="selectIdWarp">
				<view class="">
					已选择：
				</view>
				<view class="selectitem" v-for="(it,index) in info['parts_json']" :key="index" v-if="it.number>0"
					@tap="clickSelectItem(it)">
					{{it.parts_name}} <text style="color: #f00;">{{it.number}}</text>个/{{it.parts_price*1}}元
				</view>
			</view>
			<view class="" style="display: flex;margin-top: 20rpx;">
				<view class="">
					备注：
				</view>
				<input type="text" v-model="info.remarks" placeholder="请输入备注" />
			</view>
		</view>

		<view class="" style="background: #fff;padding: 20rpx 20rpx;margin: 20rpx 0;">
			<text v-if="$store.state.user&&$store.state.user.userInfo&&$store.state.user.userInfo&&$store.state.user.userInfo.area
				">{{$store.state.user.userInfo.area || '广州'}}仓库</text>
		</view>

		<view style="background-color: #fff;padding: 20rpx 20rpx;margin: 20rpx 0;">
			<view class="search-input">
				<u-search placeholder="请输入关键词" v-model="params.keywords" shape="square" @search="search"
					@custom="search"></u-search>
			</view>
		</view>

		<view class="layout" style="margin-top: 20rpx;">
			<scroll-view class="layout-left">
				<view class="item" :class="{
					active: params.category_id1 === it.id
				}" v-for="(it, idx) in categoryList" :key="it.id" @tap="clickItem(it)">
					{{ it['name'] }}
				</view>
			</scroll-view>
			<view class="layout-right">

				<view class="categoryList2Warp">
					<view class="item" :class="{
						active: params.category_id2 === it2.id
					}" v-for="(it2, idx) in categoryList2" :key="it2.id" @tap="clickItem2(it2)">
						{{ it2['name'] }}
					</view>
				</view>

				<u-list refresher-background="#F2F4F6" refresher-threshold="50" height="100%"
					style="padding-bottom: 130rpx;">
					<view class="item" v-for="(it,idx) in listData" :key="idx">
						<view class="item-body">
							<view class="image">

								<u-image v-if="it.images.length" :src="'https://img.nantianit.com'+it.images[0]"
									width="100%" height="88px">
									<view slot="error" style="font-size: 24rpx;">无图片</view>
								</u-image>
								<view v-if="it.images.length==0">
									<view style="font-size: 24rpx;text-align: center;line-height: 80rpx;">无图片</view>
								</view>
							</view>
							<view class="content">
								<view class="name">名称：{{it.parts_name}}</view>
								<view class="price">价格：<text>{{it.parts_price}}</text></view>
								<view class="number">数量：{{it.number}}</view>
								<view class="number">类型：{{it.parts_type}}</view>
							</view>
						</view>
						<u-number-box v-model="it.selectNumber" @change="valChange($event,it)" min="0"
							:max="it.number"></u-number-box>
					</view>

				</u-list>
			</view>
		</view>


		<view class="nt-submit-footer">
			<nt-button text="提交领取申请" @click="submit"></nt-button>
		</view>
	</nt-container>
</template>

<script>
	import {
		getPartsCategoryPaginate,
		getCityPartsList,
		postPartsApply,
		getPartsApply
	} from "@/api"
	import {
		forEach
	} from "lodash";

	export default {
		data() {
			return {
				isPull: false,
				scrollHeight: 0,
				params: {
					category_id1: '',
					category_id2: '',
					keywords: ''
				},
				info: {
					id: '',
					parts_json: [],
					remarks: ''
				},
				categoryList: [],
				categoryList2: [],
				listData: [],
				isNext: true,
				loading: false,
			}
		},
		provide() {
			return {
				storehouseParts: this
			}
		},
		computed: {
			listHeight() {
				let convention = this.scrollHeight - 160;
				return convention
			}
		},
		created() {
			this.init()
		},
		onLoad(options) {
			this.info.id = options.id ?? ''
		},
		methods: {
			submit() {
				if (this.loading || !this.isNext) return;
				this.loading = true
				postPartsApply(this.info).then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.toast("提交成功")
						setTimeout(() => this.back(), 1000)
					}
				}).finally(() => {
					this.loading = false
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			search() {
				this.getList()
			},
			clickSelectItem(it) {
				let _this = this;
				this.info['parts_json'].forEach(function(it2, index) {
					if (it2.id == it.id) {
						_this.info['parts_json'][index]['number'] = 0;
					}
				})
				this.listData.forEach(function(it2, index) {
					if (it2.id == it.id) {
						_this.listData[index]['selectNumber'] = 0;
					}
				})
			},
			valChange(e, it) {
				let itIn = '';
				let _this = this;
				this.info['parts_json'].forEach(function(it2, index) {
					if (it2.id == it.id) {
						itIn = 1;
						_this.info['parts_json'][index]['number'] = e.value;
					}
				})
				if (itIn == '') {
					this.info['parts_json'].push({
						'id': it.id,
						'area': it.area,
						'number': e.value,
						'parts_name': it.parts_name,
						'parts_price': it.parts_price,
					})
				}
			},
			getList() {
				if (this.loading || !this.isNext) return;
				this.loading = true
				getCityPartsList(this.params).then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						let selectNumberArr = [];
						this.info['parts_json'].forEach(function(it2, index) {
							selectNumberArr[it2.id] = it2.number;
						})
						data.data.forEach(function(it2, index) {
							data.data[index]['selectNumber'] = selectNumberArr[it2.id] ?? 0;
						})
						this.listData = data.data;
					}
				}).finally(() => {
					this.loading = false
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			getCategoryList() {
				getPartsCategoryPaginate().then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						if (data.length > 0) {
							this.categoryList = [{
								name: '全部',
								id: ''
							}, ...data]
						}
					}
				})
			},
			clickItem(e) {
				if (this.loading) {
					return false
				}
				this.params.category_id1 = e.id
				this.params.category_id2 = ''
				this.categoryList2 = e.id ? [{
						name: '全部',
						id: ''
					}, ...e.level_list] : [],
					this.getList()
			},
			clickItem2(e) {
				if (this.loading) {
					return false
				}
				this.params.category_id2 = e.id
				console.log(this.params)
				this.getList()
			},
			refresherrefresh() {
				this.isPull = true
				this.init()
			},
			init() {
				if (this.info.id) {
					getPartsApply({
						'id': this.info.id
					}).then(res => {
						const {
							code,
							data
						} = res
						if (code === 1) {
							this.info = data
						}
					})
				}

				this.list = []
				this.isNext = true;
				this.getCategoryList()
				this.getList()


			},
		}
	}
</script>

<style lang="scss" scoped>
	.selectIdWarp {
		display: flex;
		flex-wrap: wrap;
	}

	.selectitem {
		border: 1px solid #000;
		padding: 6rpx 8rpx;
		margin: 5px;
		border-radius: 8rpx;
	}

	.nt-submit-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		background: #fff;
		padding: 0 70rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		/deep/ .button-container {
			width: 100%;
		}
	}

	.layout {
		display: flex;
		height: 100%;

		&-left,
		&-right {
			height: 100%;
		}

		&-left {
			width: 240rpx;
			flex-shrink: 0;
			// background: paleturquoise;
			background: #fff;

			.item {
				width: 100%;
				padding: 10rpx 15rpx;
				min-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #333;
				background: #fff;
				border-bottom: 1rpx solid #f5f5f5;
				box-sizing: border-box;

				&.active {
					color: #fff;
					font-weight: bold;
					background: var(--theme-color)
				}

				.count {
					padding: 4rpx 6rpx;
					box-sizing: border-box;
					border-radius: 6rpx;
					background: #f00;
					color: #fff;
					font-size: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		&-right {
			flex: 1;
			margin-left: 20rpx;
			// background: peachpuff
			background: #fff;

			.categoryList2Warp {
				font-size: 14rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					&.active {
						color: #fff;
						font-weight: bold;
						background: var(--theme-color)
					}
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	.scroll-view {
		margin-top: 20rpx;

	}

	.search {
		height: 80rpx;
		background: #fff;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.check-tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		margin: 20rpx;
		background: #fff;

		&__item {
			flex: 1;
			text-align: center;
			color: #666;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;

			&.active {
				background: var(--theme-color);
				color: #fff;
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1rpx;
				background: #f5f5f5
			}
		}
	}

	.item {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		&-body {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.image {
				height: 160rpx;
				width: 160rpx;
				background: #f5f5f5;
				border-radius: 6rpx;
				flex-shrink: 0;
			}

			.content {
				flex: 1;
				margin-left: 20rpx;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.price,
				.number {
					font-size: 26rpx;
					color: #666;
					margin-top: 6rpx;

					text {
						color: #f00;
					}
				}
			}
		}

		&-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btn {
				padding: 6rpx 14rpx;
				border-radius: 50rpx;
				font-size: 26rpx;
				color: var(--theme-color);
				border: 1rpx solid var(--theme-color);
				width: 140rpx;
				margin-top: 10rpx;
				text-align: center;
				margin-left: 10rpx;
			}
		}
	}
</style>